<!-- 首页 固定代码 不需要改变 -->
<template>
  <el-container style="height: 97vh; width: 100%">
    <el-header height="auto" >
      <list-header @getMenu="getMenu" > </list-header>
    </el-header>
    <el-container>
      <el-aside width="200px" style="background:#f8f9fa">
        <list-left ref="setChildMenu" @getTarget="getTarget"> </list-left>
      </el-aside>
        <el-main style="padding-left: 20px">
          <list-main ref="setTarget"></list-main>
        </el-main>
    </el-container>
  </el-container>
<div>
  </div>
</template>

<script>
import listHeader from '@/components/list-header.vue' //顶部菜单
import listLeft from '@/components/list-left.vue' //左侧菜单
import listMain from '@/components/list-main.vue' //main页面
import {ref} from 'vue';

export default {
  components: {
      listHeader,
      listLeft,
      listMain
    },
  setup () {
    const setChildMenu = ref(null);
    const setTarget = ref(null);

    //header菜单点击时触发此方案
    function getMenu(childMenu){
      setChildMenu.value.setLeftMenu(childMenu);
    }

    //获取左侧菜单的链接 left菜单点击时触发此方法
    function getTarget(targetMenu){
      //设置main的跳转页面
      setTarget.value.setPageTarget(targetMenu);
    }
    return {
      getMenu,
      getTarget,
      setTarget,
      setChildMenu
    }

  }
}
</script>


<style>
  html,body,#app,.el-container{
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
         /*外部间距也是如此设置*/
        margin: 0px;
        /*统一设置高度为100%*/
        height: 100%;
        width: 100%;
        font-size: 16px;
    }

  .el-container {
    height: 100%;
  }

  .el-header, .el-footer {
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    text-align: left;
    line-height: 200px;
    /* padding-left: 20px; */
  }

  .el-main {
    text-align: center;
    margin-right: 20px;
    /* line-height: 160px; */
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

.el-menu.el-menu--horizontal {
    border-bottom: solid 0px var(--el-menu-border-color);
}

.el-header {
      --el-header-padding: 0 0px !important;
}
</style>